<!DOCTYPE html>
<html>

<head>
    <title>SVG Demo 03</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div {
            float: left;
        }
    </style>
</head>

<body>
    <h1>Demo03：矩形和多边形</h1>
    <h2>rect and polygon</h2>
    <div style="width: 200px;height:200px;stroke: red">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" rx="10" ry="10" fill="#F9F38C" stroke="#D07735" stroke-width="5"></rect>
        </svg>
    </div>
    <div style="width: 200px;height:200px;stroke: red">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <polygon points="10,10 40,10 40,40 70,40 70,70 100,70 100,100" fill="#F9F38C" stroke="#D07735" stroke-width="5" />
        </svg>
    </div>
    <div style="width: 200px;height:200px;stroke: red">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <polygon points="10,10 10,100 87.94228634059948,55" fill="#F9F38C" stroke="#D07735" stroke-width="5" />
        </svg>
    </div>
    <div style="width: 200px;height:200px;stroke: red">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <polygon points="10,10 10,100 100,100 100,10" fill="#F9F38C" stroke="#D07735" stroke-width="5" />
        </svg>
    </div>
    <div style="width: 200px;height:200px;stroke: red">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <polygon points="10,10 10,100 100,10 100,100" fill="#F9F38C" stroke="#D07735" stroke-width="5" />
        </svg>
    </div>
    <div style="width: 500px;height:250px;stroke: red">
        <svg width="100%" height="100%" viewBox="0,0,500,250" xmlns=" http://www.w3.org/2000/svg ">
          <polygon points="122 59,72 205,194 114,49 114,171 205 "
            style="fill-rule: nonzero; fill: #CFC; stroke: #000 "/>
          <polygon points="321 60,271 206,393 115,248 115,370 206 "
           style="fill-rule: evenodd; fill: #CFC; stroke: #000 "/>
          <text x="90 " y="240 " style="fill: #090; font-size: 16px ">
            nonzero</text>
          <text x="290 " y="240 " style="fill: #090; font-size: 16px ">
            evenodd</text>
        </svg>
    </div>
</body>

</html>